<template>
  <div v-loading="aa" style="width: 100%;height: 100%;">
    <div class="common-layout" v-if="b">
      <el-container>
        <el-header>
          <film-icon />
        </el-header>
        <el-main>
          <div>
            <div>
              发表评论
            </div>
            <div>
              <fs-icon :film="pac" />
            </div>
          </div>
          <div class="pn" v-if="pn"> 暂无评论</div>
          <div class="common-pl">
            <pl-icon v-for="(d,index) in datac"
                     :chai="d.chai"
                     :key="index"
                     :zhang="d.zhan"
                     :user="d.user"
                     :text="d.textd"
                     :email="d.email"
                     :time="d.time"
                     :film="file"
                     :url="d.url"
                     style="border-radius: 23px;" />
          </div>

        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import FilmIcon from '@/components/ico/pn/filmIcon.vue'

import PlIcon from '@/components/ico/pn/plIcon.vue'
import FsIcon from '@/components/ico/pn/fsIcon.vue'
import axios from 'axios'

export default {
  components: { FsIcon, PlIcon, FilmIcon },
  data() {
    return {
      datac: [],
      pac: '',
      b: false,
      aa: true,
      pn: true,
      file:''
    }
  },
  methods: {
    a() {
      const a = this.$route.query.pa
      this.pac = a
      return a
    }
  },
  mounted() {
    const a = this.a()
    this.file=a
    axios.get('/api/pn/getpn', {
      params: {
        name: a,
        k: 1
      },
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then((response) => {
      if (response.data.data.length > 0) {
        this.pn = false
      }

      for (let i = 0; i < response.data.data.length; i++)
        this.datac.push(response.data.data[i])
    })
    setTimeout(() => {
      this.aa = false
      this.b = true
    }, 1000)
  }
}

</script>

<style scoped>
.pn {
  width: 100%;
  text-align: center;
  padding-top: 30px;
}

.el-main {

  position: relative;
  box-shadow: 0 0 20px 1px black;
  margin: 30px auto 0;
  border-radius: 43px;
  width: 90%;
  padding: 60px 90px;
}

.common-layout {
  width: 100%;
  height: 100vh;
  background: radial-gradient(#bdbdbd, rgba(0, 0, 0, 0.91));
  color: #f3f3f3;
  overflow-y: auto;
  white-space: nowrap;
}


.el-header {
  width: 75%;
  height: 400px;
  box-shadow: 0 0 20px 1px black;
  border-radius: 20px;
  margin: 30px auto 0;
  position: relative;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 2px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(159, 159, 159, 0.3);
  background-color: #818181;
}
</style>